
<template>
  <div class="table-block">
    <!-- 表头 -->
    <div class="tHeader">
      <div class="tr">
        <div
          v-for="(tr, index) in columns"
          :key="index"
          class="td"
          :style="'width:' + tr.width + '%'"
        >
          <div>{{ tr.label }}</div>
        </div>
      </div>
    </div>
    <div class="tBody">
      <div v-for="(tr, index) in dataSource" :key="index" class="tr">
        <div
          v-for="(td, key) in tr"
          :key="key"
          class="td"
          :style="getColWidth(key)"
        >
          <div v-if="!isImage(key)">{{ td }}</div>
          <img v-else :src="td" alt="" class="image" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    columns: { default: () => [] },
    dataSource: { default: () => [] },
  },
  mounted() {},
  methods: {
    getColWidth(key) {
      let re = this.columns.find((v) => key == v.key);
      if (re) {
        return "width:" + re.width + "%;color:" + re.color + ";";
      } else {
        // return "width:25%;color:#333;";
      }
    },
    isImage(key) {
      let re = this.columns.find((v) => key == v.key);
      return re && re.type == "image" ? true : false;
    },
  },
};
</script>

<style scoped lang="less">
.table-block {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 14px;
}
.tHeader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 35px;
  line-height: 35px;
  background-color: #f4f7fc;
  .tr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    .td {
      width: 25%;
      height: 100%;
      padding: 0 10px;
      font-size: 12px;
      box-sizing: border-box;
      text-align: center;
    }
  }
}
.tBody {
  width: 100%;
  height: 100%;
  padding: 35px 0 50px 0;
  box-sizing: border-box;
  overflow: auto;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 0px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #fff;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #fff;
  }
  .tr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 55px;
    line-height: 55px;
    border-bottom: 1px solid rgba(215, 215, 215, 0.42);
    .td {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 25%;
      height: 100%;
      padding: 0 10px;
      box-sizing: border-box;
      text-align: center;
      font-size: 12px;

      div {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.image {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
</style>